<template>
  <div class="todo-container">
    <el-badge v-if="value" :value="value" class="item" @click="toApproval">
      <svg-icon icon-class="web" @click="toApproval" />
    </el-badge>
    <svg-icon v-else icon-class="web" @click="toApproval" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { initData } from '@/api/data'
import global_const from '@/mixins/global_const'

export default {
  name: 'ToApproval',
  mixins: [global_const],
  data() {
    return {
      value: 0
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted() {
    this.initApprovalNum()

    // 监听审核审批事件
    this.$bus.$on('global-approval-change', this.initApprovalNum)
  },
  methods: {
    initApprovalNum() {
      initData('/api/publishSheetFlow', {
        processerId: this.user.id,
        flowStatus: [`${this.FLOW_STATUS_PROCESS}`, `${this.FLOW_STATUS_REJECT}`],
        page: 0,
        size: 1500
      }).then(data => {
        this.value = data.content.length
      }).catch(err => {
        this.$notify({
          title: '获取待处理审批信息失败' + err,
          type: 'error',
          duration: 2500
        })
      })
    },
    toApproval() {
      this.$router.push('/deploy/publish/index')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .todo-container {
    cursor: pointer;
    width: 50px;
    padding: 0 0px;
    height: 100%;
    display: inline-block;
    margin-right: 0px;
    .s-select {
      margin-right: 0px;
    }
    &:hover {
      background-color: lightgray;
    }
  }

  ::v-deep .el-badge__content.is-fixed {
    top: 15px;
  }
</style>
